Web.Reporter.pl Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przyk│adami
autor: Dariusz Majgier • ostatnia aktualizacja kursu: 2003.06.01

[Start] • [Elementy HTML] • [Atrybuty HTML] • [Style CSS] • [Porady online]
[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [t│a] • [synteza] • [druk]

Moja pierwsza strona WWW w 15 minut

Tworzenie stron WWW jest zajΩciem w miarΩ prostym i bardzo przyjemnym. Podstaw jΩzyka HTML mo┐na nauczyµ siΩ w kilka godzin, a dos│ownie po chwili zbudowaµ prost▒ witrynΩ. Trzeba tylko pamiΩtaµ o przestrzeganiu kilku podstawowych zasad.

Aby wprawnie pos│ugiwaµ siΩ jΩzykiem HTML niezbΩdna jest praktyka. Identyczn▒ stronΩ mo┐na wykonaµ na bardzo wiele sposob≤w, wiΩc tylko do╢wiadczony webmaster bΩdzie w stanie stworzyµ j▒ lepiej, szybciej, tak aby dobrze prezentowa│a siΩ identycznie w ka┐dej przegl▒darce. Polecam wiΩc eksperymentowanie, testowanie, sprawdzanie efekt≤w w r≤┐nych przegl▒darkach i ci▒g│e podnoszenie swoich umiejΩtno╢ci.

Pierwsza strona

Aby tworzyµ strony WWW nie musisz mieµ dostΩpu do Internetu. Wystarczy przegl▒darka stron WWW zainstalowana Twoim komputerze. StronΩ musisz zapisaµ w zwyk│ym pliku tekstowym i odpowiednio go nazwaµ. Do pisania stron WWW nadaje siΩ ka┐dy, nawet najbardziej banalny edytor tekstowy - od prostego Notatnika w systemie Windows czy Pico w Unixie, a┐ do specjalistycznych edytor≤w HTML. Ka┐dy ma sw≤j ulubiony edytor tekstowy, ja u┐ywam rewelacyjnego NoteTab Pro (mniej zaawansowana wersja tego edytora dostΩpna jest bezp│atnie).

Dokument zawieraj▒cy HTML powinien mieµ rozszerzenie .html lub .htm - co sugeruje, ┐e to jest strona WWW. PrzyjΩ│o siΩ, ┐e g│≤wna strona serwisu ma zwykle nazwΩ index.html (czasem mo┐e siΩ jednak nazywaµ inaczej). Pozosta│e strony, do kt≤rych mo┐na dotrzeµ z index.html mog▒ mieµ dowolne nazwy. Niech bΩd▒ jednak czytelne i niezbyt d│ugie.

W nazwach stron wa┐na jest wielko╢µ liter - najlepiej stosowaµ tylko ma│e litery bez polskich znak≤w. Strona Kontakt.html nie jest t▒ sam▒ stron▒ co kontakt.html (zwr≤µ uwagΩ na wielko╢µ pierwszej litery K). Nie powinno siΩ te┐ u┐ywaµ polskich znak≤w w nazwach stron, uwa┐aj te┐ na znaki specjalne (np. %^&#$@). Nie stosuj te┐ spacji (odstΩp≤w). Lepiej nadaµ nazwΩ: pokarm-dla-zolwia.html ni┐ pokarm dla ┐≤│wia.html.

Ka┐da strona ma pewne elementy wsp≤lne. Musisz poinformowaµ przegl▒darkΩ, ┐e ma do czynienia z jΩzykiem HTML, a nie zwyk│ym tekstem. W dodatku napisanym z polskimi znakami w standardzie ISO8859-2. Warto te┐ nadaµ stronie tytu│.

Oto szablon ka┐dej strony WWW, kt≤ry mo┐esz skopiowaµ i modyfikowaµ w zale┐no╢ci od dalszych potrzeb. Maj▒c prostego "gotowca" szybko stworzysz dowoln▒ inn▒ stronΩ. 

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
  <meta http-equiv="content-type" 
    content="text/html; charset=iso-8859-2">
  <title>Tu wstaw tytu│ strony</title>
</head>
<body>

  Moja pierwsza strona www!

</body>
</html>

Powy┐szy szablon to niezbΩdne minimum, wiΩc powinien znajdowaµ siΩ w tre╢ci ka┐dej strony WWW. S▒ tak┐e strony, kt≤rych budowa mo┐e byµ inna, ale dla wiΩkszo╢ci wszystkich witryn w Internecie wspomniana konstrukcja jest standardem.

!DOCTYPE okre╢la wariant jΩzyka HTML (Transitional w wersji 4.0 jest stosowany najczΩ╢ciej). NastΩpnie informujemy przegl▒darkΩ, ┐e jest to dokument HTML umieszczaj▒c ca│▒ tre╢µ dokumentu w parze element≤w: <HTML> i </HTML>. Ka┐da strona ma nag│≤wek znajduj▒cy siΩ pomiΩdzy elementami <HEAD> i </HEAD>. Umieszczamy w nim tytu│ strony w elementach <TITLE> i </TITLE> i informacjΩ o kodowaniu polskich znak≤w w ISO-8859-2. Po nag│≤wku znajduje siΩ czΩ╢µ, kt≤r▒ widzimy w oknie przegl▒darki - okre╢laj▒ j▒ elementy <BODY> i </BODY>. Tu znajduje siΩ tekst, grafika, odno╢niki, tabele i inne rzeczy.

Skopiuj zawarto╢µ do edytora tekstu, zapisz wszystko na dysku pod nazw▒ index.html i zobacz jak wygl▒da strona w przegl▒darce. W zasadzie ju┐ masz swoj▒ stronΩ...

Kilka zasad

Jak widzisz, wiΩkszo╢µ element≤w HTML to pary polece±. Jest element otwieraj▒cy i zamykaj▒cy, np. tytu│ zosta│ otoczony par▒ <TITLE> i </TITLE>. DziΩki temu przegl▒darka wie, co ma wy╢wietliµ na belce przegl▒darki jako tytu│ strony. Je┐eli w tre╢ci strony jaki╢ wyraz otoczysz par▒ element≤w <B> i </B> zostanie on pogrubiony (B to skr≤t od angielskiego s│owa Bold). Znaj▒c pary polece± mo┐esz z tekstem robiµ dowolne rzeczy. Tak na prawdΩ nie musisz uczyµ siΩ par - wystarczy pamiΩtaµ nazwΩ polecenia, bo konstrukcja jest zwykle taka sama: <POLECENIE> ... </POLECENIE>.

Polecenia (w kursie s▒to elementy HTML) mog▒ mieµ jeszcze atrybuty. Oznacza to, ┐e mo┐esz zmieniaµ w│a╢ciwo╢ci tych polece±. Je┐eli chcesz utworzyµ po│▒czenie z inn▒ stron▒ WWW wystarczy, ┐e do polecenia A dodasz atrybut href okre╢laj▒cy adres innej strony. W praktyce wygl▒da to nastΩpuj▒co: 

<A href="http://web.reporter.pl/">odno╢nik do WebReportera</A>

Je┐eli dodasz jeszcze atrybut target, mo┐esz okre╢liµ okno, w kt≤rym otwarta zostanie strona WWW. Niech to bΩdzie nowe okno przegl▒darki, a wiΩc target bΩdzie mia│ warto╢µ _blank (blank to czyste, nowe okno). 

<A href="http://reporter.pl/" target="_blank">Zobacz Reporter.pl</A>

Zobacz Reporter.pl

Polecenia i atrybuty mog▒ byµ pisane du┐ymi lub ma│ymi literami, nie ma to znaczenia. Wy│▒cznie na potrzeby kursu stosujΩ du┐e litery dla element≤w (polece±), a ma│e litery dla atrybut≤w poniewa┐ taki spos≤b jest bardziej czytelny. Ale r≤wnie dobrze powy┐szy odno╢nik m≤g│by zostaµ zapisany tak: 

<a HrEf="http://reporter.pl/" tarGET="_BLaNk">Zobacz Reporter.pl</a>

Pewnie domy╢lasz siΩ, ┐e aby wstawiµ na stronΩ jaki╢ obrazek, trzeba u┐yµ elementu odpowiedzialnego za grafikΩ i wskazaµ mu, kt≤ry obrazek ma wstawiµ. Element IMG odpowiada za obrazki (IMG to skr≤t od s│owa Image). Ma wiele atrybut≤w, a jednym z nich jest src (czyli source - ╝r≤d│o obrazka). U┐yjmy ich wiΩc... Niech dodatkowo obrazek bΩdzie na ╢rodku strony (polecenie centruj▒ce nazywa siΩ CENTER). 

<center>
  <img src="../p/logo.gif">
</center>

I oto mamy obrazek. PamiΩtaj jeszcze, ┐e warto╢ci atrybut≤w powinno siΩ umieszczaµ w cudzys│owach. DziΩki temu przegl▒darka mo┐e je prawid│owo zidentyfikowaµ. Pewnie chcesz mieµ "klikalny" obrazek, kt≤ry jest odno╢nikiem do innego serwisu? Po│▒czmy wiΩc dotychczasow▒ wiedzΩ: 

<center>
<a href="http://www.reporter.pl" target="_blank">
<img src="../p/logo.gif" width="120" height="60" border="0"></a>
</center>

Nie jest to skomplikowane, choµ pojawi│y siΩ kolejne atrybuty: width to szeroko╢µ obrazka, height okre╢la wysoko╢µ, a border="0" powoduje, ┐e znika ramka oznaczaj▒ca, ┐e obrazek jest odno╢nikiem. Nie chcΩ ramki, bo tylko szpeci obraz - dlatego prawie zawsze element IMG na stronach WWW ma wy│▒czon▒ ramkΩ...

Kolejna istotna zasada to kolejno╢µ otwierania i zamykania polece±. Nie powinno siΩ robiµ czego╢ takiego: 

<s>kilka <b>przyk│adowych</s> wyraz≤w</b>

kilka przyk│adowych wyraz≤w

Element S definiuje przekre╢lenie, ale zanim zosta│ on zamkniΩty, otworzy│em element B (pogrubienie), a nastΩpnie zamkn▒│em S zamiast B. S▒ one za│o┐one "na krzy┐". Wygl▒da to ma│o czytelnie i nie jest zgodne z regu│ami, pomimo tego, ┐e przegl▒darka pokaza│a efekt dobrze... Oto prawid│owa kolejno╢µ: 

<s>kilka</s> <b><s>przyk│adowych</s> wyraz≤w</b>

Wiem, ┐e trzeba by│o u┐yµ kilka razy S, ale op│aci│o siΩ. Przyk│ad jest bardziej czytelny. W skomplikowanych dokumentach ma to ogromne znacznie. Dlatego podczas tworzenia strony zwracaj uwagΩ na jej czytelno╢µ. Nie przez przypadek wiele autor≤w robi charakterystyczne wciΩcia w kodzie HTML. U│atwia to odczytanie kodu po latach, gdy sam autor nie pamiΩta co mia│ na my╢li robi▒c stronΩ...

Zauwa┐, ┐e ju┐ potrafisz tworzyµ odno╢niki i wstawiaµ grafikΩ. Ka┐dy akapit (blok tekstu) rozpoczyna siΩ od polecenia P (akurat on nie wymaga stosowania elementu zamykaj▒cego, choµ warto go u┐yµ). Te informacje wystarczaj▒ aby pokusiµ siΩ o eksperymenty z Twoj▒ pierwsz▒ stron▒ WWW.

Podczas tworzenia stron WWW trafisz te┐ na wiele niedogodno╢ci. Poniewa┐ istnieje kilka przegl▒darek stron WWW, niekt≤re polecenia mog▒ w nich dawaµ odmienny efekt. Czasem strona z niezamkniΩtymi poleceniami lub tabelami (co jest oczywi╢cie b│Ωdem) bΩdzie wygl▒da│a poprawnie pod Internet Explorerem. Zdarzy siΩ i tak, ┐e poprawna strona, wykorzystuj▒ca standard jΩzyka HTML zalecany przez organizacjΩ W3C mimo wszystko nie bΩdzie dobrze pokazywana przez przegl▒darkΩ Netscape. Ludzie bΩd▒ chcieli stronΩ drukowaµ, wysy│aµ mailem, zapisywaµ na dysku. O wszystkich potrzebach u┐ytkownika musisz pomy╢leµ!

Je┐eli chcesz poznaµ wszystkie elementy i atrybuty jΩzyka HTML, wystarczy, ┐e bΩdziesz przegl▒daµ kurs - wszΩdzie znajdziesz przyk│ady i om≤wienia - wystarczy je skopiowaµ do szablonu aby sprawdziµ jak dzia│aj▒. Dobrym treningiem jest te┐ podgl▒danie innych witryn i sprawdzanie, jak autorzy poradzili sobie z wykonaniem r≤┐nych efekt≤w. Ucz▒c siΩ na przyk│adach poznasz wiele technik i metod tworzenia stron. Po jakim╢ czasie wypracujesz w│asne, najlepsze rozwi▒zania i wtedy inni bΩd▒ mogli uczyµ siΩ od Ciebie...

Powodzenia!

 
• • •
Zobacz porady, skrypty, artyku│y i gotowe rozwi▒zania dla w│a╢cicieli stron WWW!